<template>
  <header id="header">
    <div class="container">
      <router-link class="left" to="/home">乐享</router-link>
      <!--<span @click="aa">ceshi</span>-->
      <div class="right">
        <!--{{User_id}}{{!!User_id}}-->
        <el-button @click="showSearchGroup">群组</el-button>

        <el-button @click="showSearchFriend">朋友</el-button>
        <el-button @click="showRegister" v-if="!IsLogIn">注册</el-button>
        <el-button @click="showLogin" v-if="!IsLogIn">登陆</el-button>
        <div v-if="!!IsLogIn" class="menu">
          <a href="javascript:" @click="gotomyself">
            <img :src="avatar" :alt="user_name" class="middle-avatar">
          </a>
          <div class="top-menu">
            <div>
              <div @click="showCreateGroup"><span>创建群组</span></div>
              <div @click="showCreateNotice"><span>发送通知</span></div>
              <div @click="Logout"><span>退出登陆</span></div>
            </div>
          </div>
        </div>
        {{user_name}}
      </div>
    </div>
  </header>
</template>
<script>
  /* eslint-disable spaced-comment */

  import { UserLogout, UserInfoReadMyself, aaaa } from '../public/api'

  export default {
    name: 'header',
    data () {
      return {
        user_name: '',
        avatar: '',
        IsLogIn: false
      }
    },
    methods: {
      aa () {
        aaaa().then().catch()
      },
      showSearchGroup () {
        this.$emit('showSearchGroup')
      },
      showCreateGroup () {
        this.$emit('showCreateGroup')
      },
      showRegister () {
        this.$emit('showRegister')
      },
      showCreateNotice () {
        this.$emit('showCreateNotice')
      },
      showLogin () {
        this.$emit('showLogin')
      },
      showSearchFriend () {
        this.$emit('showSearchFriend')
      },
      gotomyself () {
        this.$router.push({name: 'main', params: {role: 'myself'}})
      },
      Logout () {
        this.$confirm('您是否要登出', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          UserLogout({}).then(data => {
            if (data.status) {
              sessionStorage.removeItem('user_id')
              this.$message.success('登出成功')
              window.location.reload()
            }
          }).catch()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      Init () {
        UserInfoReadMyself().then(data => {
          if (data.status) {
            console.log(data)
            this.IsLogIn = true
            this.$store.commit('getUser_id', data.data.user_id)
            this.user_name = data.data.name
            this.avatar = data.data.avatar
            sessionStorage.setItem('avatar', this.avatar)
          }
        }).catch(data => {})
      }
    },
    computed: {
      User_id () {
        return this.$store.state.user_id
      }
    },
    watch: {
      User_id () {
        this.Init()
      }
    },
    mounted () {
      this.Init()
    }
  }
</script>
<style scoped>
  header {
    line-height: 60px;
    background: pink;
    height: 60px;
    overflow: visible;
  }

  .container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: visible;
  }

  .badge {
    position: relative;
  }

  .badge:after {
    content: "";
    position: absolute;
    top: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
  }

  .menu {
    display: inline-block;
  }

  .menu:hover .top-menu {
    visibility: visible;
  }

  .top-menu {
    font-size: 14px;
    visibility: hidden;
    width: 90px;
    background: transparent;
    background-clip: content-box;
    line-height: 40px;
    position: absolute;
    top: 45px;
    z-index: 3;
    border-top: 30px solid transparent;

  }

  .top-menu > div {
    box-shadow: 0 0 8px 2px #0000002b;
    border-radius: 5px;
    background: #fff;
    overflow: hidden
  }

  .top-menu:before {
    content: '';
    width: 0px;
    height: 0px;
    left: 37px;
    top: -18px;
    position: absolute;
    /*background: red;*/
    border: 9px solid transparent;
    border-bottom: 9px solid #fff;
  }

  .top-menu div {

  }

  .top-menu div div:hover {
    cursor: pointer;
    background: #0000001c;
  }

  .top-menu div div:hover span:before {
    content: '>';
    left: 4px;
  }

  .top-menu div div:hover span:after {
    content: '<';
    right: 4px;
  }

  .top-menu div div:hover span:after, .top-menu div div:hover span:before {
    position: absolute;
    opacity: 1;
    transition: all 0.4s ease;
  }

  .top-menu div span:before {
    content: '>';
    left: -10px;
  }

  .top-menu div span:after {
    content: '<';
    right: -10px;
  }

  .top-menu div span:after, .top-menu div span:before {
    position: absolute;
    opacity: 0;
    transition: all 0.4s ease;
    color: #02A2D6
  }
</style>
